<template>
  <div>
    <!-- Header 区域 -->
    <van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.back()" />

    <!-- 文章等待加载中 -->
    <van-loading v-if="artObj.aut_name === undefined" size="24px" color="#007bff">文章加载中...</van-loading>

    <div v-else>
      <!-- 文章信息部分 -->
      <div class="article-container">
        <!-- 文章标题 -->
        <h3 class="art-title">{{artObj.title}}</h3>
        <!-- 用户信息 -->
        <van-cell center :border="false">
          <!-- 头像 -->
          <template #icon>
            <van-image width="1.6rem" height="1.6rem" round :src="artObj.aut_photo" />
          </template>
          <!-- 昵称 发布时间 -->
          <template #title>
            <div class="name">{{artObj.aut_name}}</div>
            <div class="time">{{formatDate(artObj.pubdate)}}</div>
          </template>
          <!-- 关注按钮 -->
          <template #default>
            <van-tag plain type="primary" size="large" v-if="!artObj.is_followed" @click="followedFn(false)">+ 关注
            </van-tag>
            <van-tag type="primary" size="large" v-else @click="followedFn(true)">已关注</van-tag>
          </template>
        </van-cell>
        <!-- 分割线 -->
        <van-divider></van-divider>
        <!-- 文章内容部分 -->
        <div class="art-content" v-html="artObj.content"></div>
        <!-- End分割线 -->
        <van-divider>End</van-divider>
        <div class="like-box">
          <van-tag plain type="danger" size="large" v-if="artObj.attitude === -1">
            <van-icon name="good-job-o" @click="loveFn(false)" />点赞
          </van-tag>
          <van-tag type="danger" size="large" v-else>
            <van-icon name="good-job-o" @click="loveFn(true)" />已点赞
          </van-tag>
        </div>
      </div>

      <!-- 评论组件 -->
      <CommentList></CommentList>
    </div>

  </div>
</template>

<script>
import { getArticleDetailAPI, userUnFollowAPI, userFollowAPI, userLikeAPI, userUnLikeAPI } from '@/api'
import { timeAgo } from '@/utils/date.js'
import CommentList from './CommentList.vue'
export default {
  name: 'ArticleDetail',
  data() {
    return {
      artObj: {} // 文章对象
    }
  },
  created() {
    this.getArticleDetailFn()
  },
  methods: {
    // 获取文章详细信息
    async getArticleDetailFn() {
      const { data: res } = await getArticleDetailAPI({
        id: this.$route.query.art_id
      })
      this.artObj = res.data
    },
    // 格式化时间方法
    formatDate: timeAgo,

    // 关注/取关 按钮
    async followedFn(bool) {
      if (bool) {
        // 点击已关注（取关）按钮
        await userUnFollowAPI({ userId: this.artObj.aut_id })
        // 把按钮从（已关注）变为（+ 关注）
        this.artObj.is_followed = false
      } else {
        // 点击关注按钮
        await userFollowAPI({ userId: this.artObj.aut_id })
        // 把按钮从（+ 关注）变为（已关注）
        this.artObj.is_followed = true
      }
    },

    // 点赞/取消点赞 按钮
    async loveFn(bool) {
      if (bool) {
        // 点击已点赞（取消点赞）按钮
        await userUnLikeAPI({ artId: this.artObj.art_id })
        // 把按钮从（已点赞）变为（点赞）
        this.artObj.attitude = -1
      } else {
        // 点击点赞按钮
        await userLikeAPI({ artId: this.artObj.art_id })
        // 把按钮从（点赞）变为（已点赞）
        this.artObj.attitude = 0
      }
    }
  },
  components: {
    CommentList
  }
}
</script>

<style lang="less" scoped>
.article-container {
  margin: 60px 10px;

  h3 {
    font-size: 18px;
  }
  .van-cell {
    padding: 10px 0 0;
    .van-image {
      margin-right: 10px;
    }
    .name {
      font-weight: 600;
      font-size: 14px;
    }
    .time {
      font-size: 12px;
      color: #a5a09d;
    }
  }
  .art-content {
    margin: 20px 0 0;
    overflow: scroll;
    font-size: 14px;
  }
  .like-box {
    text-align: center;
    .van-tag {
      padding: 10px 10px;
    }
  }
}
.van-loading {
  text-align: center;
  padding-top: 46px;
}
</style>
